@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@include ns.b(switch) using ($b) {
  #{fun.getCssVarName($b, actionSize)}: 40rpx;
  #{fun.getCssVarName($b, actionColor)}: #{#fff};
  #{fun.getCssVarName($b, inactiveColor)}: #{fun.getCssVarValue(info-borderColor)};
  #{fun.getCssVarName($b, activeColor)}: #{fun.getCssVarValue(primary-backgroundColor)};
  #{fun.getCssVarName($b, duration)}: 0.3s;
  font-size: 24rpx;
  $distance: #{calc(fun.getCssVarValue($b, actionSize) + 4rpx)};
  display: flex;
  align-items: center;

  @include ns.e(label) using ($e) {
    color: fun.getCssVarValue($b, activeColor);
    margin: 0 #{calc($distance - fun.getCssVarValue($b, actionSize))};
    transition: color fun.getCssVarValue($b, duration) linear;
  }

  @include ns.e(inactive) using ($e) {
    margin-left: 0;
  }
  @include ns.e(active) using ($e) {
    order: 1;
    margin-right: 0;
    color: fun.getCssVarValue($b, inactiveColor);
  }

  @include ns.e(box) using ($e) {
    display: flex;
    align-items: center;
    position: relative;
    min-height: fun.getCssVarValue($b, actionSize);
    border-radius: 10000rpx;
    min-width: 80rpx;
    transition: fun.getCssVarValue($b, duration) linear;
    transition-property: background, width, min-width;
    border: 4rpx solid transparent;
    box-sizing: content-box;
    background: fun.getCssVarValue($b, inactiveColor);
  }

  @include ns.e(core) using ($e) {
    line-height: fun.getCssVarValue($b, actionSize);
    padding: 0 0 0 $distance;
    transition: padding fun.getCssVarValue($b, duration) linear;
    @include mixin.e();
  }

  @include ns.e(action) using ($e) {
    position: absolute;
    background: fun.getCssVarValue($b, actionColor);
    border-radius: 50%;
    width: fun.getCssVarValue($b, actionSize);
    height: fun.getCssVarValue($b, actionSize);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    transition: fun.getCssVarValue($b, duration) linear;
    transition-property: left, color;
    color: fun.getCssVarValue(info-shadowColor);
    font-size: calc(fun.getCssVarValue($b, actionSize) * 0.75);
  }

  @include ns.s(active) using ($s) {
    @include ns.b($b) using ($b) {
      @include ns.e(inactive) using ($e) {
        color: fun.getCssVarValue($b, $e + Color);
      }
      @include ns.e(active) using ($e) {
        color: fun.getCssVarValue($b, $e + Color);
      }
      @include ns.e(box) using ($e) {
        background: fun.getCssVarValue($b, activeColor);
      }

      @include ns.e(core) using ($e) {
        padding: 0 $distance 0 0;
      }

      @include ns.e(action) using ($e) {
        left: calc(100% - fun.getCssVarValue($b, actionSize));
        color: fun.getCssVarValue($b, activeColor);
      }
    }
  }

  @include ns.s(disabled) using ($s) {
    cursor: no-drop;
    @include ns.b($b) using ($b) {
      @include ns.e(label) using ($e) {
        color: fun.getCssVarValue(disabled-textColor);
      }
      @include ns.e(box) using ($e) {
        background: fun.getCssVarValue(disabled-backgroundColor);
      }

      @include ns.e(core) using ($e) {
        color: fun.getCssVarValue(disabled-textColor);
      }
      @include ns.e(action) using ($e) {
        color: fun.getCssVarValue(disabled-backgroundColor);
      }
    }
  }
}